/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-02 08:42:28
 * @LastEditTime : 2023-08-03 10:13:31
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Assets\Template\Legend.jsx
 * @Description  :
 */
import { useEffect, useState } from 'react'
import { ICON } from '../../../../Common/Configure/Icon'
import './Scss/Legend.scss'

export const Legend001 = ({ data, MapClickEvent, defaultValue }) => {
    const [Active, setActive] = useState(defaultValue || Object.keys(data))

    useEffect(() => {
        MapClickEvent.emit({ type: 'IsShow', data: Active })
    }, [Active, MapClickEvent])

    return (
        <div className="Legend001">
            {Object.keys(data).map(key => (
                <div
                    key={key}
                    className={Active.includes(key) ? 'active' : ''}
                    onClick={() => {
                        const index = Active.findIndex(v => v === key)
                        if (index === -1) setActive([...Active, key])
                        else setActive([...Active.slice(0, index).concat(Active.slice(index + 1))])
                    }}
                >
                    {ICON[data[key].icon]}
                    <div>{key}</div>
                </div>
            ))}
        </div>
    )
}
